<template>
  <el-row>
    <el-col v-if="canEdit===0" :span="24">{{ vo[vModelStart]|formatTime(format) }} 至 {{ vo[vModelEnd]| formatTime(format) }}</el-col>
    <el-col v-if="canEdit===1" :span="24" style="position:absolute;left:0px;top:0px;text-align:center;"><span>至</span></el-col>
    <el-col v-if="canEdit===1" :span="12">
      <validation-provider v-slot="{ errors }" name="开始日期" :rules="{required:required,before:'结束日期'}">
        <el-tooltip :disabled="errors===undefined||errors[0]===undefined" :content="errors===undefined?'':errors[0]" :class="{'invalid-field':errors!==undefined&&errors[0]!==undefined}" popper-class="error-popper-class" placement="right-start" effect="dark">
          <el-date-picker
            v-model="vo[vModelStart]"
            :type="type"
            :format="format"
            value-format="yyyy-MM-dd HH:mm:ss"
            :placeholder="placeholderStart"
            :clearable="false"
            style="width:95%"
          />
        </el-tooltip>
      </validation-provider>
    </el-col>
    <el-col v-if="canEdit===1" :span="12" style="text-align:right;">
      <validation-provider v-slot="{ errors }" name="结束日期" :rules="{required:required,after:'开始日期'}">
        <el-tooltip :disabled="errors===undefined||errors[0]===undefined" :content="errors===undefined?'':errors[0]" :class="{'invalid-field':errors!==undefined&&errors[0]!==undefined}" popper-class="error-popper-class" placement="right-start" effect="dark">
          <el-date-picker
            v-model="vo[vModelEnd]"
            :type="type"
            :format="format"
            value-format="yyyy-MM-dd HH:mm:ss"
            :placeholder="placeholderEnd"
            :clearable="false"
            style="width:95%"
          />
        </el-tooltip>
      </validation-provider>
    </el-col>
  </el-row>
</template>

<script>

export default {
    name: 'DatetimeRange',
    components: {

    },
    props: {
        vo: { type: Object, default: null },
        type: { type: String, default: 'datetime' },
        vModelStart: { type: String, default: 'startTime' },
        vModelEnd: { type: String, default: 'endTime' },
        placeholderStart: { type: String, default: '开始时间' },
        placeholderEnd: { type: String, default: '结束时间' },
        required: { type: Boolean, default: true },
        format: { type: String, default: null },
        canEdit: { type: Number, default: 1 }
    },
    data() {
        return {

        }
    },
    computed: {

    },
    watch: {

    },
    created() {
        if (this.type === 'date' && this.format === null) {
            this.format = 'yyyy-MM-dd HH:mm:ss'
        } else if (this.type === 'datetime' && this.format === null) {
            this.format = 'yyyy-MM-dd HH:mm:ss'
        } else if (this.type === 'ime' && this.format === null) {
            this.format = 'HH:mm:ss'
        }
    },
    beforeDestroy() {

    },
    mounted() {

    },
    methods: {

    }
}
</script>

<style scoped lang="scss">

</style>
